<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="author" content="www.lzqcode.com" />
    <meta name="robots" content="all" />
    <title>我的博客</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="css/master.css" />
    <link rel="stylesheet" href="css/gloable.css" />
    <link rel="stylesheet" href="css/nprogress.css" />
    <link rel="stylesheet" href="css/blog.css" />
</head>
<body>
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">Mr.chen</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="article.html">博客</a></li>
                        <li><a href="message.html">留言</a></li>
						<li><a href="diary.html">日记</a></li>
<!--                        <li><a href="link.html">友链</a></li>-->
                    </ul>
                </nav>
<!--                <a href="/User/QQLogin" class="blog-user">-->
<!--                    <i class="fa fa-qq"></i>-->
<!--                </a>-->
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container cbt" id="doc-container">
        <div class="container-fixed">
		    <div class="col-content">
		        <div class="inner">
		            <article class="article-list bloglist" id="LAY_bloglist" >
						<section class="article-item zoomIn article" v-for="item in blogs">
							<h5 class="title">
								<span class="fc-blue" v-if="item.type == 1">【原创】</span>
								<span class="fc-blue" v-else>【转发】</span>
								<a href="javascript:void(0)" @click="goToSee(item)">{{item.title}}</a>
							</h5>   
							<div class="time">       
								<span class="month fs-18"><span class="fs-14">{{item.createTime}}</span></span>
							</div>
							<div class="content">       
								<a href="javascript:void(0)" class="cover img-light" @click="goToSee(item)">
									<img :src="'../../../file/' + item.define2">
								</a>
							</div>
							<aside class="f-oh footer">
								<div class="f-fl tags">           
									<span class="fa fa-tags fs-16"></span>           
									<a class="tag" v-if="item.tno == 1">日常点滴</a>
									<a class="tag" v-if="item.tno == 2">资源共享</a>
									<a class="tag" v-if="item.tno == 3">其他</a>
								</div>
								<div class="f-fr">           
									<span class="read">               
										<i class="fa fa-eye fs-16"></i>               
										<i class="num">{{item.viewCount}}</i>
									</span>           
								</div>
							</aside>
						</section>
		            </article>
		        </div>
		    </div>
		    <div class="col-other">
		        <div class="inner">
					<div class="other-item" id="categoryandsearch">
			    		<div class="search">
					        <label class="search-wrap">
					            <input type="text" id="searchtxt" placeholder="输入关键字搜索"  @keyup.enter="search"/>
					            <span class="search-icon">
					                <i class="fa fa-search" @click="search"></i>
					            </span>
					        </label>
			        		<ul class="search-result"></ul>
			    		</div>
			    		<ul class="category mt20" id="category">
				        	<li data-index="0" class="slider"></li>
				        	<li data-index="1"><a href="javascript:void(0)" class="allBlog" @click="changeType(0)">全部文章</a></li>
				            <li data-index="2"><a href="javascript:void(0)" class="tno1" @click="changeType(1)">日常点滴</a></li>
				            <li data-index="3"><a href="javascript:void(0)" class="tno2" @click="changeType(2)">资源共享</a></li>
				            <li data-index="4"><a href="javascript:void(0)" class="tno3" @click="changeType(3)">其他</a></li>
			    		</ul>
					</div>
					<!--右边悬浮 平板或手机设备显示-->
					<div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
					<div class="article-category">
					    <div class="article-category-title">分类导航</div>
							<a href="javascript:void(0)" class="allBlog" @click="changeType(0)">全部文章</a>
							<a href="javascript:void(0)" class="allBlog" @click="changeType(1)">日常点滴</a>
							<a href="javascript:void(0)" class="allBlog" @click="changeType(2)">资源共享</a>
							<a href="javascript:void(0)" class="allBlog" @click="changeType(3)">其他</a>
					    <div class="f-cb"></div>
					</div>
					<!--遮罩-->
					<div class="blog-mask animated layui-hide"></div>
					<div class="other-item">
					    <h5 class="other-item-title">热门文章</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
					                <li v-for="(item,index) in topBlogs">
										<a href="javascript:void(0)" @click="goToSee(item)">{{item.title}}</a>
									</li>
					        </ul>
					    </div>
					</div>
<!--					<div class="other-item">-->
<!--					    <h5 class="other-item-title">置顶推荐</h5>-->
<!--					    <div class="inner">-->
<!--					        <ul class="hot-list-article">-->
<!--					                <li> <a href="/Blog/Read/16">java学习路线</a></li>-->
<!--					                <li> <a href="/Blog/Read/14">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>-->
<!--					                <li> <a href="/Blog/Read/9">小白轻松入门Redis</a></li>-->
<!--					        </ul>-->
<!--					    </div>-->
<!--					</div>-->
<!--					<div class="other-item">-->
<!--					    <h5 class="other-item-title">最近访客</h5>-->
<!--					    <div class="inner">-->
<!--					        <dl class="vistor">-->
<!--					                <dd><a href="javasript:;"><img src="image/a1.png"><cite>Anonymous</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a4.png"><cite>Dekstra</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a2.png"><cite>惜i</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a3.png"><cite>↙Aㄨ计划 ◆莪↘</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a4.png"><cite>.</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a1.png"><cite>Lambert.</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a2.png"><cite>64ღ</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a3.png"><cite>doBoor</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a4.png"><cite>毛毛小妖</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a1.png"><cite>NULL</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a2.png"><cite>吓一跳</cite></a></dd>-->
<!--					                <dd><a href="javasript:;"><img src="image/a3.png"><cite>如初</cite></a></dd>-->
<!--					        </dl>-->
<!--					    </div>-->
<!--					</div>-->
		        </div>
		    </div>
		</div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
<!--                    <div class="contact">-->
<!--                        <a href="javascript:void(0)" class="github" target="_blank"><i class="fa fa-github"></i></a>-->
<!--                        <a href="https://wpa.qq.com/msgrd?v=3&uin=930054439&site=qq&menu=yes" class="qq" target="_blank" title="930054439"><i class="fa fa-qq"></i></a>-->
<!--                        <a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw" class="email" target="_blank" title="930054439@qq.com"><i class="fa fa-envelope"></i></a>-->
<!--                        <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>-->
<!--                    </div>-->
                    <p class="mt05">
						Copyright &copy; 2024-2025 CBT个人博客
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script src="layui/layui.js"></script>
    <script src="js/yss/gloable.js"></script>
    <script src="js/plugins/nprogress.js"></script>
    <script>NProgress.start();</script>
 	<script src="js/yss/article.js"></script>
	<script src="js/jquery-3.6.0.js"></script>
	<script src="js/vue.js"></script>
    <script> 
        window.onload = function () {
            NProgress.done();
        };

        let cbt = new Vue({
			el:".cbt",
			data:{
				blogs:[],
				topBlogs:[]
			},
			methods:{
				goToSee(item){
					console.log(item.id)
					localStorage.setItem("id",item.id);
					location.href="read.html"
				},
				search(){
					let searchContent = $("#searchtxt").val();
					console.log(searchContent)
					$.post("/blog/searchBlog",{searchContent:searchContent},rt=>{
						this.blogs = rt.data;
					},"json");
				},
				changeType(tno){
					if(tno == "1" || tno == 1 || tno == 2 || tno == "2" || tno == 3 || tno == "3"){
						localStorage.setItem("tno",tno)
						$(".allBlog").css("color","grey")
						let className = ".tno" + tno
						$(className).css("color","green")
						for(let i = 1 ;i <= 3;i++){
							if(i != tno){
								let otherClassName = ".tno" + i
								$(otherClassName).css("color","grey")
							}
						}
						$.post("/blog/findByTno",{tno:tno},rt=>{
							this.blogs = rt.data;
							console.log(rt)
						},"json");
					}else{
						localStorage.setItem("tno",4)
						$(".allBlog").css("color","green")
						for(let i = 1 ;i <= 3;i++){
							let otherClassName = ".tno" + i
							$(otherClassName).css("color","grey")
						}
						$.post("/blog/findAll",{},rt=>{
							this.blogs = rt.data;
							console.log(rt)
						},"json");
					}
				}
			},
			mounted(){
				let tno = localStorage.getItem("tno");
				console.log(tno)
				if(tno == "1" || tno == 1 || tno == 2 || tno == "2" || tno == 3 || tno == "3"){
					let className = ".tno" + tno
					$(className).css("color","green")
					$.post("/blog/findByTno",{tno:tno},rt=>{
						console.log(rt)
						this.blogs = rt.data;
					},"json");
				}else{
					$(".allBlog").css("color","green")
					$.post("/blog/findAll",{},rt=>{
						console.log(rt)
						this.blogs = rt.data;
					},"json");
				}

				$.post("/blog/getTopBlogs",{},rt=>{
					console.log(rt)
					this.topBlogs = rt.data;
				},"json");
			}
		})

    </script>
</body>
</html>
